<!DOCTYPE html>
<html lang="zh">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8"/>
    <title>Vue.ListView</title>
    <style>
        label {
            display: inline-block;
            vertical-align: middle;
            margin: 5px;
            padding: 7px;
            border-bottom: 1px solid #aaa;
            width: 30%;
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-show="!!viewing">
            <button @click="viewing=''">关闭</button>
            <image-viewer :src="viewing" v-bind="{width: 800, height: 800, viewHeight: 600, viewWidth: 600}"></image-viewer>
        </div>
        <div v-show="!viewing">
            <button @click="prop.datas.shift()">删除第一个</button>
            <scroll-view style="margin: 10px auto;"
                :view-width="prop.viewWidth"
                :view-height="prop.viewHeight"
                :show-time="prop.showTime"
                bar-y="defaultBar"
                :bar-inside="prop.barInside">
                <list-view class='content' v-bind="prop" slot-scope="{scroll}" :style="scroll">
                    <a slot-scope="props" :href="'#' + props.index" @click="viewing = props.src">
                        <lazy-img :use-slot="true" v-bind="props" :key="props.src">
                            <cover-img slot-scope="props" v-bind="props"></cover-img>
                        </lazy-img>
                    </a>
                        
                </list-view>
            </scroll-view>
            <div>
                <label>
                   视图宽度: <input type="number" v-model.number="prop.viewWidth" /> 
                </label>
                <label>
                   视图高度: <input type="number" v-model.number="prop.viewHeight" /> 
                </label>
                <br>
                <label>
                   列: <input type="number" v-model.number="prop.col" /> 
                </label>
                <label>
                   图片尺寸: <input type="number" v-model.number="prop.size" /> 
                </label>
                <label>
                    加载个数: <input type="number" v-model.number="prop.loadSize"> 
                </label>
                <br>
                <label>
                    行间距: <input type="number" v-model.number="prop.spacing.horizontal" /> 
                </label>
                <label>
                    列间距: <input type="number" v-model.number="prop.spacing.vertical" /> 
                </label>
                <br>
                <label>
                    滚动条显示时间: <input type="number" v-model.number="prop.showTime"> 
                </label>
                <br>
                <label>
                    <input type="checkbox" v-model.boolean="prop.barInside" /> 滚动条内置
                </label>
                <label>
                    已加载：<span>{{Math.min(prop.times * prop.loadSize, prop.datas.length)}}，</span><button @click="prop.times++">加载更多</button>
                </label>
                <label>
                    <button @click="prop.datas.sort(() => {
                        return Math.random() - 0.5;
                    })">随机排序</button>
                </label>
                
                
            </div>
        </div>
            
            
    </div>
    <script type="text/javascript" src="../images/data.js"></script>
    <script type="text/javascript" src="../vue-2.5.17/dist/vue.js"></script>

    <script type="text/javascript" src="../components/base-view.js"></script>
    <link rel="stylesheet" href="../components/base-view.css">
    <script type="text/javascript" src="../components/scroll-view.js"></script>
    <link rel="stylesheet" href="../components/scroll-view.css">
    <script type="text/javascript" src="../components/smart-img.js"></script>

    
    <script type="text/javascript" src="../imageViewer/index.js"></script>
    <link rel="stylesheet" href="../imageViewer/index.css">

    <script type="text/javascript" src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">

    <script>
        
        var vm = new Vue({
            el: "#app",
            data: {
                viewing: '',
                prop: {
                    datas: getImageList(),
                    times: 1,
                    loadSize: 10,
                    col: 4,
                    size: 146.25,
                    spacing: {
                        horizontal: 5,
                        vertical: 5
                    },
                    showTime: 1000,
                    viewWidth: 600,
                    viewHeight: 600,
                    barInside: true
                }
                    
            }
        })
    </script>
</body>
</html>